<template>
  <div class="app-container">
    <div class="header">
      <div class="header-item">
        <div class="header-item-main">
          <img src="../assets/layout/header-user.png" />
          <div>
            <div class="title">用户总数</div>
            <p>{{ headerObj.userNumber }}个</p>
          </div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-item-main">
          <img src="../assets/layout/header-month.png" />
          <div>
            <div class="title">访问总数</div>
            <p>{{ headerObj.wxNumber }}次</p>
          </div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-item-main">
          <img src="../assets/layout/header-yuyue.png" />
          <div>
            <div class="title">预约总量</div>
            <p>{{ headerObj.reservationNumber }}次</p>
          </div>
        </div>
      </div>

      <div class="header-item">
        <div class="header-item-main">
          <img src="../assets/layout/header-time.png" />
          <div>
            <div class="title">人均停留时长</div>
            <p>50ms</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="mthonLineData"></div>
    </div>
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts'
import {
  getWxMonthDataAPI,
  getSelectByTotalAPI,
  getMthonLineDataAPI,
  getWxDataprofileAPI,
} from '@/api/layout/index.js'
import { mthonLineData } from './layout'
import useAppStore from '@/store/modules/app'
import { reactive, shallowRef } from 'vue'
const appStore = useAppStore()

// headerObj
const headerObj = reactive({})

// 当月每天数据
const mthonLineDataEcharts = shallowRef()

// 获取当天访问微信数据
const getWxDataprofile = async () => {
  const { data: result } = await getWxDataprofileAPI()

  headerObj.reservationNumber = result.reservationNumber
  headerObj.userNumber = result.userNumber
  headerObj.wxNumber = result.wxNumber
}
getWxDataprofile()

// 获取微信小程序官方数据
const getWxData = () => {
  getWxMonthDataAPI()
}
getWxData()

// 查询当月每天数据
const getMthonLineData = async () => {
  const { data: result } = await getMthonLineDataAPI()
  const chartDom = document.querySelector('.mthonLineData')
  //   设置x轴
  mthonLineData.xAxis[0].data = result.x
  //   设置数据
  mthonLineData.series[0].data = result.y
  mthonLineDataEcharts.value = echarts.init(chartDom)
  mthonLineData && mthonLineDataEcharts.value.setOption(mthonLineData)
}

onMounted(() => {
  getMthonLineData()
})

// 自适应处理
window.addEventListener('resize', () => {
  mthonLineDataEcharts.value.resize()
})
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-around;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.25rem;
  .header-item {
    margin-left: 0.9375rem;
    width: 17.5rem;
    padding: 10px 20px;
    .header-item-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .title {
      font-weight: 600;
      font-size: 20px;
      // text-align: center;
    }
    img {
      width: 100px;
    }
    p {
      color: #409eff;
      font-weight: 700;
      font-size: 24px;
      margin-right: 20px;
    }
  }
}
.mthonLineData {
  height: 400px;
}

.card {
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
}
</style>
